<template>
  <div class="username">
    <h3>{{ $t("language.loginhome.name") }}</h3>
    <el-form class="loginfrom" ref="loginform" :label-position="logininfo.labelPosition" :model="logininfo.loginform"
      :rules="loginrules" style="width: 90%">
      <el-form-item label="" prop="mobile">
        <div class="phone">
          <el-input  clearable :placeholder="$t('language.erolls.input1')" style="width: 100%; color: #fff"
            v-model="logininfo.loginform.mobile" :rules="loginrules">
            <template #prepend>
              <img :src="select" alt="" />
              <strong></strong>
              <div class="select">
                <span @click="rotate = !rotate">+{{ logininfo.loginform.countryCode }}</span>
                <el-icon @click="rotate = !rotate" color="#fff" :class="rotate ? 'rotate' : ''">
                  <arrow-down />
                </el-icon>
                <ul :class="rotate ? 'downlist' : ''">
                  <li v-for="(item, index) in country" @click="countrycode(item)" :key="index">
                    <img :src="item.img" alt="" />
                    <span>{{ item.num }}</span>
                  </li>
                </ul>
              </div>
            </template>
          </el-input>
        </div>
      </el-form-item>
      <el-form-item label="" prop="password">
        <div class="password">
          <el-input  clearable :type="open ? 'word' : 'password'" style="width: 100%" :placeholder="$t('language.erolls.input3')"
            v-model="logininfo.loginform.password">
            <template #prepend>
              <el-icon color="#c0c4cc" size="32">
                <Lock />
              </el-icon>
              <strong></strong>
            </template>
            <template #append>
              <el-icon v-if="open" @click="open = !open" color="#c0c4cc" size="24">
                <View />
              </el-icon>
              <el-icon v-else color="#c0c4cc" @click="open = !open" size="24">
                <Hide />
              </el-icon>
            </template>
          </el-input>
        </div>
      </el-form-item>
    </el-form>
    <div class="checkbox">
      <el-checkbox text-color="#606266" v-model="remember">{{
      $t("language.loginhome.check")
    }}</el-checkbox>
      <span @click.prevent="openforget">{{
      $t("language.loginhome.tips")
    }}</span>
    </div>
    <van-button :loading="logininfo.loading" loading-type="spinner" :disabled="logininfo.loading" @click="submitForm"
      class="login">{{ $t("language.loginhome.login") }}</van-button>
  </div>
  <div class="forgetdialog">
    <el-dialog width="90%" v-model="initVisible2" :show-close="false">
      <div id="bigcloser" style="border-bottom: 1px solid #4a4c53; padding-bottom: 15px">
        <strong></strong>
        <h4>
          {{ $t("language.forget.name") }}
        </h4>
        <span @click="initVisible2 = false">
          <el-icon color="#b5b6c8" size="16">
            <CloseBold />
          </el-icon>
        </span>
      </div>
      <div class="dialogmain">
        <el-form ref="ruleFormRef" :model="forget" :rules="forgetrules" label-width="auto" class="demo-ruleForm"
          label-position="top" status-icon>
          <el-form-item :label="$t('language.forget.title')" prop="phone">
            <el-input :placeholder="$t('language.forget.placehold')" v-model="forget.phone" />
          </el-form-item>
        </el-form>
        <van-button class="confirm">{{ $t("language.forget.btn") }}</van-button>
        <p class="text">
          {{ $t("language.forget.text1") }}
          <span>{{ $t("language.forget.text2") }}</span>
        </p>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { userequest } from "@/hooks/usehttprequest.ts";
import { reactive, watch, ref } from "vue";
import { useI18n } from "vue-i18n";
import { decrypt, encrypt } from "@/utils/code.ts";
// import { useRouter } from "vue-router";
import router from "@/router/index"
import { useStore } from "vuex";
const store = useStore();
const { PostHttp } = userequest();
const { t } = useI18n();
//获取当前路由
const currentRoute: any = router.currentRoute;
let openforget = () => {
  store.commit("SET_LOGIN", false);
  router.push('/kefu')
}
//动态获取图片路径
const getImg = (url) => {
  return new URL(`../assets/img/${url}`, import.meta.url).href;
};
let open = ref(true);
const logininfo = reactive({
  loginform: {
    // mobile: undefined,
    // password: undefined,
    mobile: "",
    password: "",
    countryCode: "55",
  },
  labelPosition: "right",
  loading: false,
});
//忘记密码
let initVisible2 = ref(false);
let forget = reactive({
  phone: "",
});
let forgetrules = reactive({});
//记住密码
let remember = ref(false);
watch(
  () => initVisible2.value,
  () => {
    if (localStorage.getItem("password") && localStorage.getItem("mobile")) {
      logininfo.loginform.password = decrypt(localStorage.getItem("password"));
      logininfo.loginform.mobile = localStorage.getItem("mobile");
      if (localStorage.getItem("remember") == "true") {
        remember.value = true;
      } else {
        remember.value = false;
      }
    }
  },
  {
    immediate: true,
  }
);

//选择国家code

watch(
  () => remember.value,
  (val) => {
    // const md5: any = new Md5();
    // md5.appendAsciiStr(logininfo.loginform.password);
    const password = encrypt(logininfo.loginform.password);
    if (val) {
      localStorage.setItem("password", password);
      localStorage.setItem("mobile", logininfo.loginform.mobile);
      localStorage.setItem("remember", "true");
    } else {
      localStorage.removeItem("password");
      localStorage.removeItem("mobile");
      localStorage.removeItem("remember");
    }
  },
  {
    immediate: true,
  }
);
watch(
  [
    () => logininfo.loginform.password,
    () => logininfo.loginform.mobile,
  ],
  () => {
    // const md5: any = new Md5();
    // md5.appendAsciiStr(logininfo.loginform.password);
    //监视表单属性
    logininfo.loginform.mobile = logininfo.loginform.mobile.replace(/[^0-9a-zA-Z_\.]*$/g, '')
    logininfo.loginform.password = logininfo.loginform.password.replace(/[^0-9a-zA-Z_\.]*$/g, '')
    const password = encrypt(logininfo.loginform.password);
    localStorage.setItem("password", password);
    localStorage.setItem("mobile", logininfo.loginform.mobile);
    localStorage.setItem("remember", "true");
  }
);
let country = reactive([
  {
    num: "55",
    img: getImg("guoqi_03.png"),
  },
  {
    num: "63",
    img: getImg("country1.png"),
  },
  {
    num: "1",
    img: getImg("guoqi_01.png"),
  },
  {
    num: "62",
    img: getImg("country2.png"),
  },
  {
    num: "52",
    img: getImg("country3.png"),
  },
  {
    num: "91",
    img: getImg("country4.jpg"),
  },
]);
let rotate = ref(false);

//表单规则

const loginrules = reactive({
  mobile: [
    {
      required: true,
      message: t("language.loginhome.tipsphone"),
      trigger: ["blur"],
    },
    {
      min: 6,
      max: 20,
      message: t("language.loginhome.tips2"),
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true,
      message: t("language.loginhome.tipsword"),
      trigger: "blur",
    },
    {
      min: 6,
      max: 20,
      message: t("language.loginhome.tips2"),
      trigger: "blur",
    },
  ],
});
//提交信息
let select = ref(getImg("guoqi_03.png"));
let countrycode = (item) => {
  logininfo.loginform.countryCode = item.num;
  rotate.value = !rotate.value;
  select.value = item.img;
};
let loginform = ref(null);
let submitForm = () => {
  loginform.value.validate((valid) => {
    if (valid) {
      // console.log(valid, 88);

      logininfo.loading = true;
      // showLoadingToast({
      //   message: t("language.commontips.loading"),
      //   loadingType: "spinner",
      //   duration: 0,
      //   zIndex: "9999",
      // });
      let form = JSON.parse(JSON.stringify(logininfo.loginform));
      form.password = encrypt(logininfo.loginform.password)
        .toString()
        .substring(0, 32);
      PostHttp("/UserCenter/v1.0/Web/Login/Phone", {
        ...form,
      })
        .then((res) => {
          // console.log(res.data, "data");

          switch (res.data.code) {
            case 5077:
              ElMessage({
                message: t("language.commontips.usernoexist"),
                type: "error",
                duration: 1000,
              });
              break;
            case 0:
              ElMessage({
                message: t("language.commontips.erollsuccess"),
                type: "success",
                duration: 1000,
                onClose: () => {
                  localStorage.setItem("token", res.data.data.jwtToken);
                  localStorage.setItem(
                    "info",
                    JSON.stringify(res.data.data.info)
                  );
                  store.commit("SET_TOKEN", res.data.data.jwtToken);
                  store.commit("SET_INFO", res.data.data.info);
                  store.dispatch('GetUserInfo', res.data.data.info).then(({ data }) => {
                    if (data.code == 0) {
                      store.commit('SET_COININFO', data.data.accounts)
                      localStorage.setItem('coinType', 'BRL')
                      store.commit('SET_COINTYPE', "BRL")
                      localStorage.setItem('coininfo', JSON.stringify(data.data.accounts))
                      store.commit("SET_LOGIN", false);
                    }
                  })
                },
              });
              break;
          }

          // showToast({
          //   message: t("language.commontips.loginsuccess"),
          //   duration: 1500,
          //   zIndex: "9999",
          //   onClose: () => {
          //     localStorage.setItem("token", res.data.jwtToken);
          //     store.commit("SET_TOKEN", res.data.jwtToken);
          //     store.commit("SET_INFO", res.data.info);
          //     // router.push("/home");
          //     store.commit("SET_LOGIN", false);
          //   },
          // });
        })
        .finally(() => {

          logininfo.loading = false;
          // showLoadingToast({
          //   message: t("language.commontips.loading"),
          //   loadingType: "spinner",
          //   duration: 0,
          //   zIndex: "9999",
          // }).close();
        });
      // debugger
    } else {
      // console.log(54545);
      return false;
    }
  });
};
</script>
<style lang="scss">
.forgetdialog {
  #bigcloser {
    width: 100%;
    @include flex(row, flex-end, center);

    strong {
      display: block;
      width: 28px;
      height: 28px;
    }

    h4 {
      flex: 1;
      font-size: 18px;
      color: #fff;
      text-align: center;
    }

    span {
      display: block;
      width: 28px;
      height: 28px;
      @include flex(row, center, center);
      border: 2px solid #b5b6c8;
      border-radius: 16px;
      margin-right: -7px;
    }
  }

  .el-input__wrapper {
    background-color: rgb(39, 42, 48) !important;
    box-shadow: none;
    border: 1px solid #4a4c53;
    height: 40px !important;
    color: #fff;

    border-radius: 10px;
  }

  .el-dialog {
    padding: 15px !important;
    background-color: rgb(50, 53, 62) !important;
    border-radius: 10px !important;
  }

  .el-form-item__label {
    color: #fff;
    font-size: 20px;
    margin-bottom: 14px !important;
  }

  .dialogmain {
    padding: 30px 40px;

    .confirm {
      background: #0a906c;
      border: none;
      color: #fff;
      display: block;
      width: 100%;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      color: #fff;
      text-align: center;
      border-radius: 5px;
      margin: 20px auto 20px;
    }

    .text {
      font-size: 13px;
      width: 100%;
      color: #b5bac8;
      margin: 13px 0;

      span {
        color: #03b484;
        font-size: 14px;
      }
    }
  }

  .el-dialog__header {
    padding: 0 !important;
  }
}

.username {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  height: 295px;

  .el-input__inner {
    color: #fff !important;
  }

  .el-select,
  .el-input {
    border: none !important;
    box-shadow: none !important;
    border-radius: 10px !important;
    border: 1px solid #4a4c53 !important;
  }

  :deep(.el-input__wrapper.is-focused) {
    border-color: #0a906c !important;
  }

  .el-input__wrapper,
  .el-tooltip__trigger {
    box-shadow: none !important;
    border: none !important;
    border-radius: 10px !important;
  }

  .el-select,
  .el-input {
    border: none !important;
    box-shadow: none !important;
    border-radius: 10px !important;
    border: 1px solid #4a4c53 !important;
  }

  .el-input-group__append {
    background-color: rgb(40, 43, 48);
    box-shadow: none !important;
    border: none !important;
    border-radius: 10px !important;
  }

  .el-input-group__prepend {
    background-color: rgb(40, 43, 48);
    box-shadow: none !important;
    border: none !important;
    padding: 0;
    border-radius: 10px !important;
  }

  .el-select__prefix {
    gap: 0px;
  }

  .el-input-group__append {
    padding: 0 10px;
  }

  .el-input__wrapper.is-focus {
    border-color: rgb(0, 144, 109) !important;
  }

  @include flex(column, flex-start, center);

  >h3 {
    font-size: 24px;
    color: #fff;
    padding: 18px 0;
  }

  .phone {
    width: 100%;
    @include flex(row, flex-start, center);
    border-radius: 10px;
    background-color: rgb(40, 43, 48);

    img {
      border-radius: 16px;
    }

    .select {
      width: 70px;
      position: relative;
      @include flex(row, center, center);

      span {
        font-size: 16px;
        color: #fff;
      }

      .el-icon {
        transition: all 0.5s;
      }

      .downlist {
        opacity: 1;
        display: block;
      }

      ul {
        opacity: 0;
        padding: 6px 0;
        transition: all 0.3s;
        position: absolute;
        top: 45px;
        z-index: 20;
        width: 88px;
        display: none;
        background-color: rgb(39, 42, 48);
        border-radius: 5px;

        li:nth-child(1) {
          &::after {
            content: "";
            position: absolute;
            top: -7px;
            left: 10px;
            z-index: 21;
            transform: translateY(-50%);
            border-left: 7px solid transparent;
            border-right: 7px solid transparent;
            border-bottom: 7px solid rgb(39, 42, 48);
            border-top: 7px solid transparent;
            /* 三角标颜色 */
          }
        }

        li {
          width: 100%;
          padding: 0 14px;
          height: 34px;

          @include flex(row, space-between, center);

          img {
            width: 22px;
            height: 22px;
            margin: 0;
            border-radius: 11px;
          }

          span {
            font-size: 14px;
            color: #8492a6;
          }
        }
      }

      .rotate {
        transform: rotate(180deg);
      }
    }

    img {
      width: 32px;
      margin: 0 5px;
    }

    strong {
      display: block;
      width: 2px;
      height: 28px;
      background-color: #4a4c53;
    }

    .el-select__placeholder {
      color: #fff;
      font-size: 16px;
    }

    .el-select__wrapper {
      padding: 0 0 !important;
      padding-left: 10px !important;
      border: none !important;
    }
  }

  .login {
    width: 90%;
    display: block;
    height: 42px;
    border: none;
    line-height: 42px;
    background-color: #0a906c;
    text-align: center;
    margin: 15px 0 5px;
    font-size: 15px;
    color: #fff;
    border-radius: 10px;
  }

  .password {
    width: 100%;
    @include flex(row, flex-start, center);
    border-radius: 10px;
    background-color: rgb(40, 43, 48);

    strong {
      display: block;
      width: 2px;
      height: 28px;
      background-color: #4a4c53;
    }

    .el-icon {
      margin: 0 5px;
    }
  }

  .checkbox {
    width: 90%;
    @include flex(row, space-between, center);
    margin-top: 15px;

    span {
      text-decoration: underline;
      font-size: 14px;
      color: #0a906c;
    }

    .el-checkbox {
      --el-checkbox-checked-input-border-color: #0a906c;
      --el-checkbox-checked-bg-color: #0a906c;
    }

    .el-checkbox__label {
      color: #606266;
    }

    .el-checkbox__input.is-checked+.el-checkbox__label {
      color: #0a906c !important;
    }
  }

  .el-input__wrapper {
    background-color: rgb(40, 43, 48);
    height: 40px;
    box-shadow: none;
    color: #fff;
  }

  .el-select__wrapper {
    background-color: rgb(40, 43, 48);
    height: 40px;
    box-shadow: none;
    color: #fff;
  }
}
</style>
